import CesiumOverviewMapControl from './CesiumOverviewMapControl'
import './Control.MiniMap.css'
const OverviewMap = function(views){
    this.views = views
    var self = this
    this.guids={
        domId:this.guid(),
        treeId:this.guid()
    }
    this.contanner = this._drawWidget()
   
}
OverviewMap.prototype={
    guid:function() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
            var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
            return v.toString(16);
        });
    },
    _drawWidget:function(){
        var dom =  document.createElement("div");
        dom.className = "overview";
        dom.id=this.guids.domId
        // var body = document.getElementsByTagName("body")[0];
        // body.appendChild(dom);
        var ViewDom = this.views.container
        ViewDom.appendChild(dom);
        this.initOverview()
        return dom
    },
    initOverview:function() {
        var url =
            "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
        var layer = new L.TileLayer(url, {
            minZoom: 0,
            maxZoom: 18
        });
        var container = document.getElementById(this.guids.domId);
        var options = {
            container: container,
            toggleDisplay: true,
            width: 150,
            height: 90,
            position: "topright",
            aimingRectOptions: {
                color: "#ff1100",
                weight: 3
            },
            shadowRectOptions: {
                color: "#0000AA",
                weight: 1,
                opacity: 0,
                fillOpacity: 0
            }
        };
        this.overviewCtr = new CesiumOverviewMapControl(this.views, layer, options);
    },
    getMap:function(){
        return this.overviewCtr.getMap()
    }
}
export default OverviewMap
